<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>《Flutter Engine源码调试》 - Lucklyの博客 - 在阅读中遇见自己</title><meta name="Description" content="早起的年轻人做的网站"><meta property="og:title" content="《Flutter Engine源码调试》" />
<meta property="og:description" content="
本文主要介绍Flutter Engine
" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://luckly.work/flutter-engine%E6%BA%90%E7%A0%81%E8%B0%83%E8%AF%95/" />
<meta property="og:image" content="https://luckly.work/logo.png"/>
<meta property="article:published_time" content="2021-07-31T21:34:42+08:00" />
<meta property="article:modified_time" content="2021-07-31T21:34:42+08:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://luckly.work/logo.png"/>

<meta name="twitter:title" content="《Flutter Engine源码调试》"/>
<meta name="twitter:description" content="
本文主要介绍Flutter Engine
"/>
<meta name="application-name" content="LoveIt">
<meta name="apple-mobile-web-app-title" content="LoveIt"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://luckly.work/flutter-engine%E6%BA%90%E7%A0%81%E8%B0%83%E8%AF%95/" /><link rel="prev" href="https://luckly.work/futurebuilder%E4%B8%8Estreambuilder/" /><link rel="next" href="https://luckly.work/flutter%E6%B5%8B%E8%AF%95%E8%84%9A%E6%9C%AC%E5%BC%80%E5%8F%91/" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "《Flutter Engine源码调试》",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/luckly.work\/flutter-engine%E6%BA%90%E7%A0%81%E8%B0%83%E8%AF%95\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "https:\/\/luckly.work\/images\/Apple-Devices-Preview.png",
                            "width":  3200 ,
                            "height":  2048 
                        }],"genre": "posts","keywords": "flutter","wordcount":  2645 ,
        "url": "https:\/\/luckly.work\/flutter-engine%E6%BA%90%E7%A0%81%E8%B0%83%E8%AF%95\/","datePublished": "2021-07-31T21:34:42+08:00","dateModified": "2021-07-31T21:34:42+08:00","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": {
            "@type": "Organization",
            "name": "xxxx","logo": {
                    "@type": "ImageObject",
                    "url": "https:\/\/luckly.work\/images\/avatar.png",
                    "width":  528 ,
                    "height":  560 
                }},"author": {
                "@type": "Person",
                "name": "早起的年轻人"
            },"description": ""
    }
    </script></head>
    <body header-desktop="fixed" header-mobile="auto"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><div class="logo-wrapper">
  <a href="/%20/" class="logo">Lucklyの博客 - 在阅读中遇见自己</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
      <a class="menu-item-link" href="/posts/">所有文章</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/flutter/">Flutter</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/read/">读书笔记</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/go/">Go</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/tags/">标签</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/">分类</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/about/">关于</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="https://github.com/ITmxs">Github</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/friend/">友链</a>
    </li>
  </ul>
</nav><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">《Flutter Engine源码调试》</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>早起的年轻人</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/flutter/"><i class="far fa-folder fa-fw"></i>Flutter</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-07-31">2021-07-31</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 2645 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 6 分钟&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        title="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li><a href="#flutter-engine源码编译">Flutter Engine源码编译</a>
          <ul>
            <li><a href="#源码下载">源码下载</a></li>
            <li><a href="#编译过程">编译过程</a>
              <ul>
                <li><a href="#检出对应版本">检出对应版本</a></li>
                <li><a href="#编译android-arm-debug默认版本">编译Android arm Debug默认版本</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#flutter-engine源码调试">Flutter Engine源码调试</a>
          <ul>
            <li><a href="#使用编译后flutter启动flutter应用">使用编译后Flutter启动Flutter应用</a></li>
            <li><a href="#向应用中添加lldb-server">向应用中添加lldb-server</a></li>
            <li><a href="#通过android-studio设置lldb">通过Android Studio设置lldb</a></li>
            <li><a href="#在ide中进行配置调试">在IDE中进行配置调试</a>
              <ul>
                <li><a href="#安装相应扩展">安装相应扩展</a></li>
                <li><a href="#导入源码">导入源码</a></li>
                <li><a href="#configuration">Configuration</a></li>
                <li><a href="#开始调试">开始调试</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><blockquote>
<p>本文主要介绍Flutter Engine</p>
</blockquote>
<p>之前进行了一些Flutter应用开发，了解了framework层面的渲染原理。发现Flutter不仅可以进行界面开发，还可以做很多其它的事情，但是这要求对于Flutter Engine的源码非常熟悉，最终对其进行修改。</p>
<p>Flutter Engine源码太多了，而且有很多第三方库，光下载源码以及依赖包就用了几个小时，总计有8G多。如果想要通过代码跟踪，很容易就缺失了相关内容，因此我选择对Flutter Engine源码进行调试，这种方式来熟悉代码。</p>
<h2 id="flutter-engine源码编译">Flutter Engine源码编译</h2>
<h3 id="源码下载">源码下载</h3>
<p>Flutter相关源码下载参考： <a href="https://github.com/flutter/flutter/wiki/Setting-up-the-Engine-development-environment">https://github.com/flutter/flutter/wiki/Setting-up-the-Engine-development-environment</a></p>
<p>注意：很多第三方代码托管在<code>chromium.googlesource.com</code>、<code>fuchsia.googlesource.com</code>、<code>skia.googlesource.com</code>等域名下，下载过程中需要开启git代理以及http、https代理服务。</p>
<h3 id="编译过程">编译过程</h3>
<p>下载过程时间很长，根据网络情况不同，大概需要几十分钟到几个小时不等。</p>
<h4 id="检出对应版本">检出对应版本</h4>
<p>首先获取当前Flutter版本的提交信息</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">cat /Users/sunwenwu/flutter/bin/internal/engine.version # 当前使用的flutter目录
</code></pre></td></tr></table>
</div>
</div><p>得到提交信息 <code>4737fc5cd89b8f0136e927b00f2e159444b95a73</code></p>
<p>然后将源码同步到指定的提交记录上：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">cd /Users/sunwenwu/flutter_engine/engine/src/flutter  # 下载后的Flutter Engine源码位置
git reset --hard 4737fc5cd89b8f0136e927b00f2e159444b95a73
gclient sync --with_branch_heads --with_tags
</code></pre></td></tr></table>
</div>
</div><h4 id="编译android-arm-debug默认版本">编译Android arm Debug默认版本</h4>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">cd /Users/sunwenwu/flutter_engine/engine/src
./flutter/tools/gn --android --android-cpu arm --unoptimized
ninja -C out/android_debug_unopt -j 8
./flutter/tools/gn --android-cpu arm --unoptimized
ninja -C out/host_debug_unopt -j 8
</code></pre></td></tr></table>
</div>
</div><p>其中<code>--android-cpu</code>可以省略，默认就是arm格式，同时默认编译debug版本。</p>
<p>编译过程大概需要30分钟，每一步都需要十五分钟左右。编译完成后会生成<code>out/android_debug_unopt</code>与<code>out/host_debug_unopt</code>两个目录。到现在为止，编译过程已经完成。</p>
<h2 id="flutter-engine源码调试">Flutter Engine源码调试</h2>
<h3 id="使用编译后flutter启动flutter应用">使用编译后Flutter启动Flutter应用</h3>
<p>调试过程需要界面触发跟踪，因此我们还要准备一个Flutter工程。因为我们新编译的Flutter版本与原来的Flutter版本一致，所以可以直接使用原来已经创建好的Flutter项目。</p>
<p>我这里原来有一个比较简单的Flutter项目<code>flutter_app</code>，工程位置在<code>/Users/sunwenwu/project/flutter_app/flutter_app</code>。</p>
<p>在查看下编译好的Flutter目录（也就是android_debug_unopt目录下），可以看到有两个重要文件<code>flutter_java.jar</code>以及<code>libflutter.so</code>，这个就是Android项目中必须的两个依赖库。</p>
<p>下面我们设置flutter应用使用我们编译好的依赖库。</p>
<p>将手机通过USB线连接到PC上，开启调试模式（手机不需要ROOT）。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">cd /Users/sunwenwu/project/flutter_app/flutter_app
flutter run --local-engine-src-path=/Users/sunwenwu/flutter_engine/engine/src --local-engine=/Users/sunwenwu/flutter_engine/engine/src/out/android_debug_unopt
</code></pre></td></tr></table>
</div>
</div><p>等待应用安装，安装完毕后，应用界面打开：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png"
        title="img" /></p>
<h3 id="向应用中添加lldb-server">向应用中添加lldb-server</h3>
<p>上面已经将libflutter.so加入到了应用中，如果想要调试Native代码，还需要通过lldb来实现。现在Android Studio中的调试Native代码也是这种方式来实现的。</p>
<p>lldb远程调试的配置方式参考：https://lldb.llvm.org/use/remote.html</p>
<p>按照上面文档配置后存在一个问题，就是最后挂载进程时，无法关联到我们的flutter应用进程。这个是因为系统权限限制，除非将手机ROOT，否则一直会提示<code>attach fail</code></p>
<p>那这个问题怎么解决？其实可以将lldb-server添加到需要调试的应用中。通过<code>run-as</code>获取应用权限，进入应用目录下进行操作。注意，使用<code>run-as</code>的应用只能是debug应用，其他应用不可以使用。</p>
<ul>
<li>首先确认安装lldb，在Android Studio的<code>SDK Manager</code>中可以进行安装或者看到安装状态：</li>
</ul>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png"
        title="img" /></p>
<ul>
<li>找到lldb-server所在目录位置，并将其推送到手机中</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">cd /Users/sunwenwu/Library/Android/sdk/lldb/3.1/android/armeabi
adb push lldb-server /data/local/tmp/
</code></pre></td></tr></table>
</div>
</div><ul>
<li>然后执行<code>run-as</code>命令将lldb-server写入到指定位置下</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">adb shell &#34;cat /data/local/tmp/lldb-server | run-as com.oldsun.flutter_app sh -c &#39;cat &gt; /data/data/com.oldsun.flutter_app/lldb-server&#39;&#34;
</code></pre></td></tr></table>
</div>
</div><p>这一步已经将lldb-server写入到了<code>/data/data/com.oldsun.flutter_app</code>文件夹中了</p>
<ul>
<li>进入应用中，启动lldb-server</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">adb shell
HWDLI-Q:/ $ run-as com.oldsun.flutter_app
HWDLI-Q:/data/data/com.oldsun.flutter_app $ chmod 700 /data/data/com.oldsun.flutter_app/lldb-server # 变更权限，可以执行相应操作
HWDLI-Q:/data/data/com.oldsun.flutter_app $ sh lldb-server platform --server --listen unix-abstract:///com.oldsun.flutter_app-0/debug.socket
</code></pre></td></tr></table>
</div>
</div><ul>
<li>在另一个终端中执行<code>lldb</code>进行调试</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">lldb
(lldb) platform select remote-android
(lldb) platform connect unix-abstract-connect:///com.oldsun.flutter_app-0/debug.sock
(lldb) process attach -p 22572 # 关联对应进程
(lldb) add-dsym /Users/sunwenwu/flutter_engine/engine/src/out/android_debug_unopt/libflutter.so # 需要调试的动态库符号通知编译器
(lldb) settings set target.source-map /Users/sunwenwu/flutter_engine/engine/src/out/android_debug_unopt /Users/sunwenwu/flutter_engine/engine/src/  # 关联源码与编译符号
</code></pre></td></tr></table>
</div>
</div><h3 id="通过android-studio设置lldb">通过Android Studio设置lldb</h3>
<p>上面的处理过程比较麻烦，实际上也有简单的办法执行。在Android Studio中启动应用，并<code>Attach Debugger to Android Process</code>，选择指定的应用。</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png"
        title="img" /></p>
<p>这时就会自动将lldb_server注入到应用中的<code>/data/data/com.oldsun.flutter_app/lldb/bin/</code>目录下。</p>
<p>重新使用脚本启动flutter应用，再次执行<code>run-as com.oldsun.flutter_app</code>，可以看到</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">adb shell
HWDLI-Q:/ $ run-as com.oldsun.flutter_app
HWDLI-Q:/data/data/com.oldsun.flutter_app $ ls
app_flutter cache files lib lldb
</code></pre></td></tr></table>
</div>
</div><p>这时执行</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">HWDLI-Q:/data/data/com.oldsun.flutter_app $ chmod 700 /data/data/com.oldsun.flutter_app/lldb/bin/lldb-server
HWDLI-Q:/data/data/com.oldsun.flutter_app $ chmod 700 /data/data/com.oldsun.flutter_app/lldb/bin/start_lldb_server.sh
HWDLI-Q:/data/data/com.oldsun.flutter_app $ sh /data/data/com.oldsun.flutter_app/lldb/bin/start_lldb_server.sh /data/data/com.oldsun.flutter_app/lldb unix-abstract /com.oldsun.flutter_app-0 debug.sock &#34;lldb process:gdb-remote packets&#34;
</code></pre></td></tr></table>
</div>
</div><p>另起新的终端，执行</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">lldb
(lldb) platform select remote-android
(lldb) platform connect unix-abstract-connect:///com.oldsun.flutter_app-0/debug.sock
(lldb) process attach -p 22572 # 关联对应进程
(lldb) add-dsym /Users/sunwenwu/flutter_engine/engine/src/out/android_debug_unopt/libflutter.so # 需要调试的动态库符号通知编译器
(lldb) settings set target.source-map /Users/sunwenwu/flutter_engine/engine/src/out/android_debug_unopt /Users/sunwenwu/flutter_engine/engine/src/  # 关联源码与编译符号
</code></pre></td></tr></table>
</div>
</div><p>关联完毕。</p>
<p>到此调试配置已经结束。</p>
<h3 id="在ide中进行配置调试">在IDE中进行配置调试</h3>
<p>上面的配置项已经可以调试了，但是只能通过脚本执行，缺乏可视化交互界面，我们通常情况下都是通过IDE进行的调试。</p>
<p>IDE可以选择Android Studio或者Visual Studio Code，相比之下，前者需要设置为特定工程，配置较复杂，我们选择VS code来进行调试。</p>
<h4 id="安装相应扩展">安装相应扩展</h4>
<p>需要安装<code>C/C++</code>与<code>CodeLLDB</code>这两个插件，正常安装即可。</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/%E5%BA%94%E7%94%A8%E9%A6%96%E9%A1%B5.png"
        title="img" /></p>
<h4 id="导入源码">导入源码</h4>
<p>在VS Code中打开文件夹，选择Flutter Engine源码所在的目录，导入。</p>
<h4 id="configuration">Configuration</h4>
<p>VS Code中选择<code>Debug-&gt;Open Configuration</code>，在打开的<code>launch.json</code>文件中配置如下内容：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">{
    &#34;version&#34;: &#34;0.2.0&#34;,
    &#34;configurations&#34;: [
    {
      &#34;type&#34;: &#34;lldb&#34;,
      &#34;request&#34;: &#34;attach&#34;,
      &#34;name&#34;: &#34;android_attach&#34;,
      &#34;pid&#34;: &#34;22572&#34;, // use ${command:pickProcess} to pick other users&#39; processes
      &#34;initCommands&#34;: [
        &#34;platform select remote-android&#34;,
        &#34;platform connect unix-abstract-connect:///com.oldsun.flutter_app-0/debug.sock&#34;
      ],
      &#34;postRunCommands&#34;: [
        &#34;add-dsym /Users/sunwenwu/flutter_engine/engine/src/out/android_debug_unopt/libflutter.so&#34;,
        &#34;settings set target.source-map /Users/sunwenwu/flutter_engine/engine/src/out/android_debug_unopt /Users/sunwenwu/flutter_engine/engine/src/&#34;
      ],
    }
    ]
  }
</code></pre></td></tr></table>
</div>
</div><p>这里面的配置项就是上面脚本中的lldb设置，保存文件。</p>
<h4 id="开始调试">开始调试</h4>
<p>在<code>src/flutter/lib/ui/window/window.cc</code>文件中的<code>Render</code>方法31行设置断点。</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731213555774.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731213555774.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731213555774.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731213555774.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731213555774.png"
        title="image-20210731213555774" /></p>
<p>断点设置完成后，按<code>F5</code>键，开始进行调试，如下图。</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731213609832.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731213609832.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731213609832.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731213609832.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731213609832.png"
        title="image-20210731213609832" /></p>
<p>手机上触发刷新界面操作，断点卡顿，等待执行</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731213622142.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731213622142.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731213622142.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731213622142.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731213622142.png"
        title="image-20210731213622142" /></p>
<blockquote>
<p>注意，上面的方式需要先设置断点再进行调试。</p>
</blockquote></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-07-31</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="https://luckly.work/flutter-engine%E6%BA%90%E7%A0%81%E8%B0%83%E8%AF%95/" data-title="《Flutter Engine源码调试》" data-hashtags="flutter"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="https://luckly.work/flutter-engine%E6%BA%90%E7%A0%81%E8%B0%83%E8%AF%95/" data-hashtag="flutter"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Hacker News" data-sharer="hackernews" data-url="https://luckly.work/flutter-engine%E6%BA%90%E7%A0%81%E8%B0%83%E8%AF%95/" data-title="《Flutter Engine源码调试》"><i class="fab fa-hacker-news fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="https://luckly.work/flutter-engine%E6%BA%90%E7%A0%81%E8%B0%83%E8%AF%95/" data-title="《Flutter Engine源码调试》"><i data-svg-src="https://cdn.jsdelivr.net/npm/simple-icons@2.14.0/icons/line.svg"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="https://luckly.work/flutter-engine%E6%BA%90%E7%A0%81%E8%B0%83%E8%AF%95/" data-title="《Flutter Engine源码调试》" data-image="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"><i class="fab fa-weibo fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/flutter/">flutter</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/futurebuilder%E4%B8%8Estreambuilder/" class="prev" rel="prev" title="《FutureBuilder与StreamBuilder》"><i class="fas fa-angle-left fa-fw"></i>《FutureBuilder与StreamBuilder》</a>
            <a href="/flutter%E6%B5%8B%E8%AF%95%E8%84%9A%E6%9C%AC%E5%BC%80%E5%8F%91/" class="next" rel="next" title="《Flutter测试脚本开发》">《Flutter测试脚本开发》<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">早起的年轻人</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.37.1/dist/autocomplete.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.2.0/dist/algoliasearch-lite.umd.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"cookieconsent":{"content":{"dismiss":"同意","link":"了解更多","message":"本网站使用 Cookies 来改善您的浏览体验."},"enable":true,"palette":{"button":{"background":"#f0f0f0"},"popup":{"background":"#1aa3ff"}},"theme":"edgeless"},"search":{"algoliaAppID":"PASDMWALPK","algoliaIndex":"index.zh-cn","algoliaSearchKey":"b42948e51daaa93df92381c8e2ac0f93","highlightTag":"em","maxResultLength":10,"noResultsFound":"没有找到结果","snippetLength":50,"type":"algolia"}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
